<template>
  <div>
    <el-dialog v-model="dialogVisible" :close-on-click-modal='false' :align-center="true" modal-class="modalZhu"
      :title="title" @close="close">
      <div>
        <div>
          <form-show v-model="queryForm" :formConfig="formConfig" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="() => close()">取消</el-button>
          <el-button @click="() => submit()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>

import { defineProps, ref, reactive, defineEmits, defineExpose } from 'vue'; //获取父组件传的props和向父组件发送方法
import FormShow from '../Form/index.vue'
import XEUtils from 'xe-utils'
import { checkFormData } from '/@/libs/common.js'


// 通用表单的设置   取消确认按钮  title标题  内容区间 校验

// 获取父组件的传参
const props = defineProps({
  formConfig: {
    type: Object,
    default: () => {
      return {}
    }
  },
  editData: {
    type: Object,
    default: () => {
      return {}
    }
  },
  title: {
    type: String,
    default: '新增'
  }
});

const emits = defineEmits(['updateMethod']);


let queryForm = reactive(XEUtils.clone(props.editData, true));
const dialogVisible = ref(true);


const updateQueryParent = (value) => {
  for (let i in value) {
    queryForm[i] = value[i]
  }
}
// 暴露出去方法 用于父组件通过ref调用
defineExpose({
  updateQuery: (e) => updateQueryParent(e)
})


const submit = () => {
  let formItemList = props.formConfig.formItemList
  let bool = checkFormData(formItemList, queryForm)
  if (bool) {
    close(true)
  }
}
const close = (boo = false) => {
  dialogVisible.value = false;
  setTimeout(() => {
    emits('updateMethod', queryForm, boo)
  }, 300);
}
</script>
<style scoped lang="less" src="./index.less"></style>
  